//功能14：雷达图

<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="网游竞技" name="first"></el-tab-pane>
      <el-tab-pane label="单机热游" name="second"></el-tab-pane>
      <el-tab-pane label="娱乐天地" name="third"></el-tab-pane>
      <el-tab-pane label="手游休闲" name="fourth"></el-tab-pane>
    </el-tabs>

    <div id="consume" :style="{ width: '1000px', height: '700px' }" />
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  mounted() {
    this.$axios
      .post(stores.spring_url + "/home/function14/first", "function14")
      .then((res) => {
        console.log(res.data);
        this.init(res.data);
      });
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.activeName);
      this.$axios
        .post(
          stores.spring_url + "/home/function14/" + this.activeName,
          "first"
        )
        .then((res) => {
          //console.log(res.data.totalHot)
          this.init(res.data);
        });
    },

    init(res) {
      const myChart = this.$echarts.init(document.getElementById("consume"));
      const nameData = [];
      const valueData = [];
      let temp = 0;
      for (let i of res.tableData) {
        //console.log(i)
        if (temp <= i.totalHot) {
          temp = i.totalHot;
        }
      }
      for (let i of res.tableData) {
        nameData.push({ name: i.nick, max: temp });
        valueData.push(i.totalHot);
      }

      myChart.setOption({
        title: {
          text: "四大分区平均消费能力",
        },
        legend: {
          data: ["周贡献榜"],
        },
        radar: {
          // shape: 'circle',
          indicator: nameData,
          // [
          //     { name: '网游竞技', max: 38000},
          //     { name: '单机热游', max: 38000},
          //     { name: '娱乐天地', max: 38000},
          //     { name: '手游休闲', max: 38000},
          // ]
        },
        series: [
          {
            name: "",
            type: "radar",
            data: [
              {
                value: valueData, //[4200, 3000, 2000, 3500]
                name: "周贡献榜",
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>